<style lang='scss' scoped>
.detail {
    height: 100vh;
    overflow: auto;
    background-color: #f3f4f6;
    .navbar_right {
        border: 1px solid #cccccc83;
        border-radius: 2rem;
        padding: 0.2rem 0.2rem;
    }
    .content {
        padding: 0 0.8rem;
        .content_top {
            margin-top: 1rem;
            display: flex;
            justify-content: space-between;
            padding: 0.8rem;
            background-color: #fff;
            border-radius: 0.5rem;
            .left {
                position: relative;
                margin-right: 1rem;
                image {
                    width: 5rem;
                    border-radius: 0.3rem;
                    vertical-align: middle;
                }
                .left_footer {
                    position: absolute;
                    width: 100%;
                    bottom: 0;
                    left: 0;
                    text-align: center;
                    background-color: #00000080;
                    color: #fff;
                    border-radius: 0 0 0.3rem 0.3rem;
                    font-size: 0.7rem;
                }
            }
            .right {
                padding: 0.2rem 0;
                box-sizing: border-box;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .name {
                    font-size: 1rem;
                    font-weight: bold;
                }
                .max_pay_num {
                    font-size: 0.8rem;
                    color: #fa8e4f;
                    background: url("../../static/images/index/numTabH.png");
                    background-size: auto 100%;
                    background-repeat: no-repeat;
                    padding: 0.3rem 0.2rem;
                    padding-left: 2rem;
                }
                .title {
                    background-color: rgba(0, 38, 255, 0.137);
                    color: rgba(0, 0, 255, 0.795);
                    font-size: 0.6rem;
                    padding: 0.1rem 0.2rem;
                    border-radius: 0.3rem;
                }
                .assemble {
                    font-size: 0.6rem;
                }
                .share_num {
                    font-size: 0.6rem;
                    text {
                        color: #07c05f;
                    }
                }
            }
        }
        .nav_tabs {
            display: flex;
            justify-content: space-around;
            margin: 1rem 0;
            .list {
                display: flex;
                align-items: center;
                padding: 0.5rem;
                background-color: #fff;
                border-radius: 0.3rem;
                border: 1px solid #fff;
                image {
                    width: 0.8rem;
                    height: 0.8rem;
                    vertical-align: middle;
                    margin-right: 0.2rem;
                }
            }
            .listactive {
                background-color: #f8efe9;
                color: #fb8872;
                border: 1px solid #fb8872;
            }
        }
        .tabsBOX {
            background-color: #fff;
            border-radius: 0.5rem;
            padding: 1rem;
            height: 15rem;
            .swiperA {
                display: flex;
                justify-content: space-between;
                .left {
                    width: 48%;
                    background: url("../../static/images/index/bc.jpg");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    text-align: center;
                    padding-top: 1rem;
                }
                .right {
                    width: 48%;
                    background: url("../../static/images/index/bc.jpg");
                    background-size: 100%;
                    background-repeat: no-repeat;
                }
            }
            .swiperD {
                .wenben {
                    padding: 0.5rem 0;
                }
                .button {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 16rpx;

                    .copyBtn {
                        width: 100%;
                        border: 0.5px solid #fa7563;
                        background: #faf0ea;
                        color: #fa7265;
                        font-size: 24rpx;
                        height: auto;
                        line-height: inherit;
                        text-align: center;
                        padding: 32rpx;
                        margin: 20rpx 5rpx;
                        border-radius: 16rpx;
                    }

                    .u-btn {
                        width: 100%;
                        border: 0.5px solid #fa7563;
                        background: #faf0ea;
                        color: #fa7265;
                        font-size: 24rpx;
                        height: auto;
                        line-height: inherit;
                        margin: 20rpx 5rpx;
                        border-radius: 16rpx;

                        p {
                            margin-top: 10rpx;
                        }
                    }
                }
            }
        }
        .jianjie {
            background-color: #fff;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1rem;
            .jianjie_title {
                font-size: 1rem;
                font-weight: bold;
                margin-bottom: 1rem;
            }
            .jianjie_content {
                font-size: 0.8rem;
                P {
                    width: 100%;
                    word-wrap: break-word;
                }
            }
        }
        .shipingsucai {
            background-color: #fff;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1rem;
            .shipingsucai_title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #00000031;
                padding-bottom: 0.5rem;
                .left {
                    font-size: 1rem;
                    font-weight: bold;
                }
                .right {
                    font-size: 0.7rem;
                    color: #fff;
                    background-color: #fa8358;
                    padding: 0.2rem 0.5rem;
                    border-radius: 0.5rem;
                }
            }
            .shipingsucai_centent {
                padding: 0.5rem 0;
                .lianjie {
                    margin-top: 0.5rem;
                    p {
                        font-size: 24rpx;
                        width: 100%;
                        word-break: break-all;
                    }
                }
                .shipingsucai_footer {
                    text-align: right;
                    text {
                        color: #3970fc;
                        display: inline-block;
                        margin-right: 1rem;
                        font-size: 0.6rem;
                    }
                }
            }
        }
        .footer_tabs {
            .footer_top {
                display: flex;
                justify-content: space-around;
                margin: 1rem 0;
                .list {
                    font-size: 0.8rem;
                    padding: 0.5rem;
                    background-color: #fff;
                    border-radius: 1rem;
                    border: 1px solid #fff;
                }
                .footer_top_listactive {
                    background-color: #f8efe9;
                    color: #fb8872;
                    border: 1px solid #fb8872;
                }
            }
            .footer_content {
                height: 100vh;
                padding: 1rem;
                background-color: #fff;
                border-radius: 1rem;
                .text {
                    width: 100%;
                    ::v-deep img {
                        width: 100%;
                    }
                }
            }
        }
        .popup {
            ::v-deep .u-mode-center-box {
                background: none;
            }
            .images_box {
                image {
                    width: 80vw;
                    margin-bottom: 2rem;
                }
                button {
                    background-color: #fa7265;
                    color: #fff;
                }
            }
        }
    }
}
</style>

<template>
    <view class="detail">
        <u-navbar title="短剧详情">
            <template #right>
                <view class="navbar_right">
                    <u-icon name="share"></u-icon>&nbsp;
                    <text>我的推广</text>
                </view>
            </template>
        </u-navbar>
        <view class="content">
            <!-- 标题 -S -->
            <view class="content_top">
                <view class="left">
                    <image :src="state.getArticleDetailobj?.image_cover" mode="widthFix" @click="handelimages()" />
                    <view class="left_footer" @click="handelimages()">保存封面</view>
                </view>
                <view class="right">
                    <view class="name">{{state.getArticleDetailobj?.name}}</view>
                    <view>
                        <text class="title">{{state.getArticleDetailobj?.theaterUpstreamApp?.title}}</text>
                        <text class="assemble">共{{state.getArticleDetailobj?.assemble}}集连载中</text>
                    </view>
                    <view class="max_pay_num">历史收益最高：{{state.getArticleDetailobj?.max_pay_num}}元</view>
                    <view class="share_num">
                        <text>{{state.getArticleDetailobj?.share_num}}</text>人推广
                    </view>
                </view>
            </view>
            <!-- 标题 -E -->
            <!-- nav tabs -S -->
            <view class="nav_tabs">
                <view class="list" v-for="(item, index) in state.nav_tabs" :key="index" :class="state.listactive == index?'listactive':''" @click="handeltabs(index)">
                    <image :src="item.url" mode="widthFix" />
                    <text>{{item.name}}</text>
                </view>
            </view>
            <!-- nav tabs -E -->
            <!-- tabsBOX -S -->
            <swiper class="tabsBOX" :current="state.swiperCurrent" @animationfinish="animationfinish">
                <!-- 抖音 -S -->
                <swiper-item class="swiperA" v-if="state.getArticleDetailobj?.is_share_douyin">
                    <view class="left">
                        asdasd
                    </view>
                    <view class="right">
                        asdasd
                    </view>
                </swiper-item>
                <!-- 抖音 -E -->
                <!-- 快手 -S -->
                <swiper-item class="swiperB" v-if="state.getArticleDetailobj?.is_share_kuaishou">ks</swiper-item>
                <!-- 快手 -E -->
                <!-- 私域 -S -->
                <swiper-item class="swiperC" v-if="state.getArticleDetailobj?.is_share_h5">sy</swiper-item>
                <!-- 私域 -E -->
                <!-- 微信 -S -->
                <swiper-item class="swiperD" v-if="state.getArticleDetailobj?.is_share_wechat">
                    <view class="title">公众号文章链接</view>
                    <view class="wenben">
                        <u-input v-model="state.swiperD_value" :type="'textarea'" :border="false" :height="150" :auto-height="true" placeholder="请复制以上平台链接到此文本框" :maxlength="1000" :custom-style="state.customStyle" />
                    </view>
                    <view class="button">
                        <u-button hover-class="none" :style="{
                                    padding: state.loading
                                        ? '20rpx 32rpx 55rpx 32rpx'
                                        : '20rpx 30rpx',
                                }">
                            {{ state.characters }}
                            <p v-show="state.loading" style="color: #ef9458">首次生成需要一些时间，请耐心等待</p>
                        </u-button>
                    </view>
                </swiper-item>
                <!-- 微信 -E -->
            </swiper>
            <!-- tabsBOX -E -->
            <!-- 简介 -S -->
            <view class="jianjie">
                <view class="jianjie_title">
                    简介
                </view>
                <view class="jianjie_content">
                    <!-- introduce -->
                    <p>{{state.getArticleDetailobj?.introduce}}</p>
                </view>
            </view>
            <!-- 简介 -E -->
            <!-- 视频素材 -S -->
            <view class="shipingsucai">
                <view class="shipingsucai_title">
                    <view class="left">
                        视频素材
                    </view>
                    <view class="right" @click="state.popup_bottom = true">
                        网盘素材保存教程
                    </view>
                </view>
                <view class="shipingsucai_centent">
                    <view class="lianjie" v-if="state.getArticleDetailobj?.material">
                        <p>链接:{{state.getArticleDetailobj?.material[0] || ''}}</p>
                    </view>
                    <view class="shipingsucai_footer">
                        <text>复制链接</text>
                        <text>打开链接</text>
                    </view>
                </view>
            </view>
            <!-- 视频素材 -E -->
            <!-- footer_tabs -S -->
            <view class="footer_tabs">
                <view class="footer_top">
                    <view class="list" v-for="(item, index) in state.shareTutorialarr" :key="index" :class="state.footer_top_listactive == index?'footer_top_listactive':''" @click="footer_top_tab(index)">
                        {{item.title}}
                    </view>
                </view>
                <view>
                    <swiper class="footer_content" :current="state.footer_contentactive" @animationfinish="footer_animationfinish">
                        <swiper-item v-for="(item, index) in state.shareTutorialarr" :key="index">
                            <scroll-view scroll-y="true" class="scroll-view" style="height: 100%;width: 100%;" @touchmove.stop>
                                <view class="text" v-html="item.content"></view>
                            </scroll-view>
                        </swiper-item>
                        <!-- <view class="text" v-html="state.shareTutorialarr[state.footer_top_listactive]?.content"></view> -->

                    </swiper>
                </view>
            </view>
            <!-- footer_tabs -E -->
            <!-- 弹窗 -S -->
            <view class="popup">
                <u-popup v-model="state.imagesshow" mode="center">
                    <view class="images_box">
                        <image :src="state.getArticleDetailobj?.image_cover || ''" mode="widthFix" />
                        <button @click="baocunzhaopian">点击保存</button>
                    </view>
                </u-popup>
            </view>
            <view class="popup_bottom">
                <u-popup-bottom v-model="state.popup_bottom" height="80%" :title="state.vedioUrlobj?.title" :url="state.vedioUrlobj?.url">
                </u-popup-bottom>
            </view>
            <!-- 弹窗 -E -->
        </view>
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { getArticleDetail, shareTutorial, vedioUrl } from "@/api/index";
const state = reactive<{
    getArticleDetailobj: object;
    nav_tabs: object[];
    listactive: number;
    swiperCurrent: number;
    swiperD_value: string;
    customStyle: object;
    loading: boolean;
    characters: string;
    imagesshow: boolean;
    shareTutorialarr: object[];
    footer_top_listactive: number;
    footer_contentactive: number;
    popup_bottom: boolean;
    vedioUrlobj: object;
}>({
    vedioUrlobj: {},
    popup_bottom: false,
    footer_contentactive: 0,
    footer_top_listactive: 0,
    shareTutorialarr: [],
    imagesshow: false,
    characters: "生成链接",
    loading: false,
    customStyle: {
        backgroundColor: "rgb(240,241,245)",
        padding: "24rpx",
        borderRadius: "16rpx",
        marginTop: "16rpx",
        color: "#999999",
        fontSize: "24rpx",
    },
    swiperD_value: "",
    swiperCurrent: 0,
    listactive: 0,
    nav_tabs: [],
    getArticleDetailobj: {},
});
onLoad(async (options: object) => {
    const response = await getArticleDetail({ id: options.id });
    state.getArticleDetailobj = response || {};
    if (state.getArticleDetailobj.is_share_douyin) {
        state.nav_tabs.push({
            name: "抖音",
            url: "../../static/images/index/douyinIcon.png",
            id: 0,
        });
    }
    if (state.getArticleDetailobj.is_share_kuaishou) {
        state.nav_tabs.push({
            name: "快手",
            url: "../../static/images/index/kuaishouIcon.png",
            id: 1,
        });
    }
    if (state.getArticleDetailobj.is_share_h5) {
        state.nav_tabs.push({
            name: "私域",
            url: "../../static/images/index/siyuIcon.png",
            id: 2,
        });
    }
    if (state.getArticleDetailobj.is_share_wechat) {
        state.nav_tabs.push({
            name: "视频号",
            url: "../../static/images/index/weixinIcon.png",
            id: 3,
        });
    }
    const shareTutorialarr = await shareTutorial();
    state.shareTutorialarr = shareTutorialarr || [];
    const vedioUrlobj = await vedioUrl();
    state.vedioUrlobj = vedioUrlobj.netdisk || {};
});
// 请求数据
const getData = async () => {};
// 本地数据
const localData = () => {};
// nav_tabs
const handeltabs = (index) => {
    state.listactive = index;
    state.swiperCurrent = index;
};
// 滑动
const animationfinish = (e) => {
    state.listactive = e.detail.current;
};
// 点击照片
const handelimages = () => {
    state.imagesshow = true;
};
//保存照片
const baocunzhaopian = () => {
    // 如果是 h5 下载图片 保存到本地 如果是小程序 保存到相册
    if (process.env.VUE_APP_PLATFORM === "h5") {
        // h5
        const img = new Image();
        img.setAttribute("crossOrigin", "anonymous");
        img.src = state.getArticleDetailobj?.image_cover || "";
        img.onload = function () {
            const canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            const context = canvas.getContext("2d");
            context.drawImage(img, 0, 0, img.width, img.height);
            const url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            const a = document.createElement("a"); // 生成一个a元素
            const event = new MouseEvent("click"); // 创建一个单击事件
            a.download = "图片"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
    } else {
        // app
        uni.saveImageToPhotosAlbum({
            filePath: state.getArticleDetailobj?.image_cover || "",
            success: function () {
                uni.showToast({
                    title: "保存成功",
                    icon: "none",
                });
            },
            fail: function () {
                uni.showToast({
                    title: "保存失败",
                    icon: "none",
                });
            },
        });
    }
};
const footer_top_tab = (index) => {
    state.footer_top_listactive = index;
    state.footer_contentactive = index;
};
const footer_animationfinish = (e) => {
    state.footer_top_listactive = e.detail.current;
    state.footer_contentactive = e.detail.current;
};
</script>